<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="$t('common.choose_merchant') + ':'">
						<merchant-select
							v-model="queryData.merchantId"
							:placeholder="$t('common.please_choose')"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_address') + ':'"
					>
						<el-input
							v-model="queryData.domainNameAddress"
							clearable
							:placeholder="$t('common.please_enter')"
							maxlength="200"
							:disabled="loading"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_type') + ':'"
					>
						<el-select
							v-model="queryData.domainNameType"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in domainNameTypes"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_status') + ':'"
					>
						<el-select
							v-model="queryData.domainNameStatus"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in domainStatusType"
								:key="item.code"
								:label="item.description"
								:value="item.code * 1"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item :label="$t('common.last_updateBy') + ':'">
						<el-input
							v-model="queryData.updatedBy"
							clearable
							:placeholder="$t('common.please_enter')"
							maxlength="20"
							:disabled="loading"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('505012')"
							type="warning"
							icon="el-icon-plus"
							:disabled="loading"
							@click="addSetEdit()"
						>
							{{ $t('common.add') }}
						</el-button>
						<el-button
							v-if="hasPermission('505017')"
							type="warning"
							icon="el-icon-document"
							:disabled="loading"
							@click="importData"
						>
							{{ $t('common.import') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					:data="tableData"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="domainNameAddress"
						align="center"
						width="280"
						:label="$t('operation.share_url.url_address')"
					></el-table-column>
					<el-table-column
						prop="domainNameStatus"
						align="center"
						:label="$t('operation.share_url.url_status')"
					>
						<template slot-scope="scope">
							<div
								v-if="scope.row.domainNameStatus === 0"
								class="disableRgba"
							>
								{{ $t('common.status_disabled') }}
							</div>
							<div
								v-else-if="scope.row.domainNameStatus === 1"
								class="normalRgba"
							>
								{{ $t('common.status_turn_on') }}
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="domainNameType"
						align="center"
						:label="$t('operation.share_url.url_type')"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.domainNameType,
									'domainNameType'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="domainNameDes"
						align="center"
						:label="$t('operation.share_url.description')"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.domainNameDes || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdBy"
						align="center"
						:label="$t('common.createBy')"
					></el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
					></el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.last_updateBy')"
					></el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
					></el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
						width="180"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('505018')"
								type="primary"
								icon="el-icon-edit"
								size="medium"
								@click="addSetEdit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
							<el-button
								v-if="hasPermission('505013')"
								type="danger"
								icon="el-icon-delete"
								size="medium"
								@click="deleteSub(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
			<el-dialog
				:visible.sync="dialogVisible"
				:destroy-on-close="true"
				width="480px"
				:show-close="false"
				class="dialog_style"
				@close="handleDialogClose"
			>
				<div slot="title" class="header_style">
					<p class="text_left">
						{{ dialogType }}
					</p>
					<p class="text_right">
						<span>*</span>
						{{ $t('common.add_dialog_tips') }}
					</p>
				</div>
				<el-form
					ref="formSub"
					:model="dialogData"
					label-width="auto"
					:rules="dataRule"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="merchantId"
					>
						<merchant-select
							v-model="dialogData.merchantId"
							:placeholder="$t('common.please_choose')"
							:merchantInfo.sync="merchantInfo"
							:disabled="dialogType === $t('common.edit')"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_address') + ':'"
						prop="domainNameAddress"
					>
						<el-input
							v-model="dialogData.domainNameAddress"
							:placeholder="$t('operation.share_url.input_tips1')"
							:disabled="dialogType === $t('common.edit')"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_type') + ':'"
						prop="domainNameType"
					>
						<el-select
							v-model="dialogData.domainNameType"
							clearable
							:placeholder="$t('common.please_choose')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in domainNameTypes"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.url_status') + ':'"
					>
						<el-radio-group v-model="dialogData.domainNameStatus">
							<el-radio
								v-for="item in domainStatusType"
								:key="item.code"
								:label="Number(item.code)"
							>
								{{ item.description }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						:label="$t('operation.share_url.description') + ':'"
						:rules="[
							{
								required: true,
								message: $t('operation.share_url.input_tips2'),
								trigger: 'blur'
							}
						]"
						prop="domainNameDes"
					>
						<el-input
							v-model="dialogData.domainNameDes"
							:placeholder="$t('common.please_enter')"
							maxlength="500"
							show-word-limit
							clearable
							type="textarea"
							v-input="{ name: 'noEmpty' }"
						></el-input>
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="subAddOrEidt">
						{{ $t('common.save') }}
					</el-button>
				</div>
			</el-dialog>
		</div>
		<uploadFile
			:uploadVisible.sync="uploadVisible"
			@load-data="search"
		></uploadFile>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import uploadFile from './components/uploadFile.vue'
export default {
	name: routerNames.memberShareDomainManage,
	components: { uploadFile },
	mixins: [list],
	data() {
		return {
			queryData: {
				merchantId: undefined,
				domainNameType: undefined,
				erchantId: undefined,
				domainNameStatus: undefined
			},
			tableData: [],
			dialogVisible: false,
			dialogType: '',
			dialogData: {
				domainNameType: undefined,
				merchantId: undefined,
				domainNameAddress: undefined,
				shareBindUserName: undefined,
				domainNameDes: undefined,
				inviteBindUserName: undefined,
				domainNameStatus: 0
			},
			uploadVisible: false,
			merchantInfo: {},
			rowData: null
		}
	},
	computed: {
		domainNameTypes() {
			return this.globalDics.domainNameType || []
		},
		domainStatusType() {
			return [
				{ code: 0, description: this.$t('common.status_disabled') },
				{ code: 1, description: this.$t('common.status_turn_on') }
			]
			// return this.globalDics.configdomainStatus || []
		},
		dataRule() {
			return {
				domainNameAddress: [
					{
						required: true,
						message: this.$t('operation.share_url.input_tips1'),
						trigger: 'blur',
						min: 1
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('operation.please_choose_merchant'),
						trigger: 'change'
					}
				],
				// domainNameStatus: [
				// 	{
				// 		required: true,
				// 		message: this.$t('operation.share_url.input_tips3'),
				// 		trigger: 'blur'
				// 	}
				// ],
				domainNameType: [
					{
						required: true,
						message: this.$t('operation.share_url.input_tips4'),
						trigger: 'change'
					}
				]
			}
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		this.loadData()
	},
	methods: {
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		loadData() {
			if (!this.queryData.merchantId) {
				this.loading = true
				this.tableData = []
				this.total = 0
				setTimeout(() => (this.loading = false), 500)
				return
			}
			this.loading = true
			const params = {
				...this.queryData,
				...this.getParams(params)
			}
			this.$api
				.getMemberDomainDomainList(params)
				.then((res) => {
					if (res?.code === 200) {
						this.tableData = res.data.record || []
						this.total = res.data.totalRecord || 0
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				merchantId: undefined,
				domainNameType: undefined,
				erchantId: undefined
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			} else {
				this.queryData.merchantId = undefined
			}
			this.pageNum = 1
			this.loadData()
		},
		importData() {
			this.uploadVisible = !this.uploadVisible
		},
		addSetEdit(row) {
			this.dialogData = { ...row }
			if (row) {
				this.dialogType = this.$t('common.edit')
				this.dialogData = Object.assign({}, row)
				this.dialogData.domainNameType = row.domainNameType + ''
			} else {
				this.dialogData = { domainNameStatus: 0 }
				this.dialogType = this.$t('common.add')
				if (!this.$store.getters.isZk) {
					this.dialogData.merchantId = this.$store.getters.merchantInfo.id
				}
			}
			this.dialogVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.clearValidate()
			})
		},

		subAddOrEidt() {
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					const message =
						this.dialogType === this.$t('common.add')
							? this.$t('common.add_success')
							: this.$t('common.edit_success')
					this.dialogData.merchantName = this.merchantInfo.merchantName
					this.$api
						.getMemberDomainSaveDomain({
							...this.dialogData
							// domainNameStatus: this.domainNameStatus
						})
						.then((res) => {
							this.$message.success(message)
							this.dialogVisible = false
							this.loadData()
						})
				}
			})
		},
		deleteSub(val) {
			this.$confirm(
				`<strong>${this.$t(
					'operation.delete_tips'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'operation.warning_tips'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api
						.getMemberDomainDeleteDomain({ id: val.id })
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.delete_success')
								)
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		handleDialogClose() {
			this.$refs.formSub.resetFields()
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog_style {
	::v-deep .el-dialog__header {
		padding-bottom: 0;
		.header_style {
			display: flex;
			justify-content: space-between;
			.text_left {
				font-weight: 700;
			}
			.text_right {
				color: #909399;
				span {
					color: #ff3b30;
				}
			}
		}
	}
	::v-deep .el-dialog__body {
		padding: 0;
		form {
			margin: 0 15px;
			padding: 15px 15px 0;
			h4.sub-title {
				width: 100px;
				color: #000;
				margin: 0 0 10px;
				text-align: right;
				padding-right: 15px;
			}
		}
	}
	.dialog-footer {
		text-align: center;
	}
}
</style>
